<template>
    <el-container v-loading="loading">
        
        <el-main>
            <div style="width: 100%; margin-bottom: 20px;">
                <EsSearchBar
                    @select="onSelectChange"
                />
            </div>
            <div style="width: 100%; margin-bottom: 20px;">
                <GeneStats />
            </div>
            <div class="basic-info">
                <div class="pdf-container">
                    <!-- <img :src="basicInfoUrl"/> -->
                    <vue-office-pdf 
                        :src="basicInfoUrl" 
                        style="width: 60%; height: fit-content;"
                    />
                </div>
                <div class="col-container">
                    <div class="chart">
                        <v-chart class="colChart" ref="chromChart"  :option="chromOption" autoresize />
                    </div>
                    <div class="chart">
                        <v-chart class="colChart" ref="seqChart" :option="techOption" autoresize />
                    </div>
                </div>
                <div>
                    <!-- 防止窗口缩小时上下两个内容重叠 -->
                </div>
                <div class="chart-container" :style=chartContainerHeight>
                    <el-tabs
                                type="card"
                                class="demo-tabs"
                                v-model="attribute"
                                @tab-change="handleTabChange"
                            >
                            <el-tab-pane lazy v-for="ele in typeOptions" :label="ele.label" :name="ele.value" :key="ele.value">
                                <div class="pieChart" style="display: block;">
                                    <v-chart class="pieChart" :option="pieOption" autoresize @click="handleChartClick" />
                                </div>
                            </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="bottom">
                <div class="github">
                    <a href="https://github.com/nanawei11/ask" target="_blank">
                        <img  class="github-svg" :src="githubUrl">
                    </a>
                    <a href="https://github.com/nanawei11/ask" target="_blank" style="text-decoration: none;">github.com/nanawei11/ask</a>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script lang="ts" setup name="Home">
    import { nextTick, onBeforeMount, onMounted, ref } from 'vue';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { PieChart } from 'echarts/charts';
    import VChart from 'vue-echarts'

    import {
        TitleComponent,
        TooltipComponent,
        LegendComponent,
    } from 'echarts/components';
    import { post } from '@/axios/api';
    import { ElMessage } from 'element-plus'
    import { useRouter } from 'vue-router';
    import { chromOption, techOption, pieOption } from './dataConfig'
    import VueOfficePdf from '@vue-office/pdf'
    import { OncotreeLineageData, MajorTumorTypeData } from './echartsData/pieData';
    import { chromData, sequenceData } from './echartsData/columnData'
    import GeneStats from './GeneStats.vue'
    import EsSearchBar from '@/components/EsSearchBar.vue';

    use([
        CanvasRenderer,
        PieChart,
        TitleComponent,
        TooltipComponent,
        LegendComponent,
    ]);

    let selectedValue = ref("OncotreeLineage");
    let attribute = ref("OncotreeLineage");
    let loading = ref(false)
    let basicInfoUrl = ref("/ask/static/pdf/Figure6.pdf")
    let githubUrl = ref("/ask/static/img/github-mark.png")

    let chromChart:any = ref(null)
    let chartContainerHeight:any = ref({
        height: '80vh'
    })

    const router = useRouter()
    const typeOptions = [
        { value: 'OncotreeLineage', label: 'OncotreeLineage' },
        { value: 'MajorTumorType', label: 'MajorTumorType' },
    ]

    function handleChartClick(params: any) {
        router.push({
            name:'search',
            params: {
                // Tissue: params.seriesName == 'Tissue' ? params.data.name : 'none',
                OncotreeLineage: params.seriesName == 'OncotreeLineage' ? params.data.name : 'none',
                Type: params.seriesName == 'MajorTumorType' ? params.data.name : 'none',
                Cellline: 'none'
            }
        })
    }

    function handleTabChange(val: any) {
        attribute.value = val
        pieOption.value.series[0].name = attribute.value
        let datasource = val === 'OncotreeLineage' ? OncotreeLineageData : MajorTumorTypeData
        handleGroupData(datasource)
    }

    function handleGroupData(datasource:any) {
        pieOption.value.series[0].data = datasource.data
        pieOption.value.legend.data = datasource.keys
    }

    function handleColumnData(dataSource: any, option:any) {
        const sorted = dataSource.data.categories.map((cat:any, index:any) => {
            const num = cat.replace('chr', '')
            return {
                category: cat,
                value: dataSource.data.series[index],
                num: isNaN(parseInt(num)) ? num : parseInt(num)
            };
        }).sort(customSort);
        option.value.xAxis.data = sorted.map((item: { category: any; }) => item.category)
        option.value.series[0].data = sorted.map((item: { value: any; }) => item.value)
    }

    function customSort(a: { num: any; }, b: { num: any; }) {
        const numA = a.num;
        const numB = b.num;
        
        if (isNaN(numA)) { // 如果 a 是 chrX 或 chrY
            return numA === 'X' ? 1 : 2; // chrX 排在 chrY 之前
        }
        
        if (isNaN(numB)) { // 如果 b 是 chrX 或 chrY
            return numB === 'X' ? -1 : -2;
        }
        
        return numA - numB; // 普通数字的比较
    }

    function onSelectChange(event: any) {
        const { tab, group, value } = event;
        router.push({
            name:'search',
            params: {
                // Tissue: params.seriesName == 'Tissue' ? params.data.name : 'none',
                OncotreeLineage: 'none',
                Type: 'none',
                Cellline: 'none',
                Tab: tab,
                group: group,
                value: value
            }
        })
    }


    onBeforeMount(() => {

    })

    onMounted(() => {
        handleGroupData(OncotreeLineageData)
        handleColumnData(chromData, chromOption)
        handleColumnData(sequenceData, techOption)

        let isMobile = ref(window.innerWidth <= 768)
        if (isMobile.value) {
            techOption.value.title.left = '10%'
            chromOption.value.title.left = '20%'
            // techOption.value.legend.right = '0'
            // chromOption.value.legend.right = '0'
            pieOption.value.legend.orient = 'horizontal'
            // pieOption.value.legend.bottom = '0'
            pieOption.value.legend.top = '90%'
            pieOption.value.series[0].radius = '55%'

            chartContainerHeight.value = {
                height: '120vh'
            }
        }
    })

</script>

<style scoped>
    .chart {
        height: 50vh;
        width: 50%;
    }

    .colChart {
        height: 50vh;
        width: 100%;
    }

    .pieChart {
        height: 70vh;
        width: 100%;
    }

    .basic-info {
        width: 100%;
        /* height: 100%; */
        height: fit-content;
        display: flexbox;
    }

    .col-container {
        width: 100%;
        height: 50vh;
        display: flex;
        border: 1px solid var(--el-border-color);
        box-sizing:border-box;
        border-radius: 4px;
        padding: 12px;
        margin: 20px 0;
        background-color: white;
    }

    .col-container:hover {
        box-shadow: 0 4px 8px #e5e7eb;
    }

    :deep(.vue-office-pdf-wrapper) {
        background: white !important
    }

    .chart-container {
      width: 100%;
      height: 80vh;
      display: flex;
      background-color: white;
      border: 1px solid var(--el-border-color);
      box-sizing:border-box;
      border-radius: 4px;
      padding: 10px;
      margin-top: 20px;
    }

    .chart-container:hover {
        box-shadow: 0 4px 8px #e5e7eb;
    }


    .demo-tabs {
        width: 100%;
    }

    .bottom {
        width: 100%;
    }

    .github {
        margin-top: 20px;
        float: right;
        display: flex;
        align-items: center;
    }

    .github-svg {
        width: 50px;
        margin-right: 10px
    }



    @media (max-width: 768px) {
        .chart {
            height: 50vh;
            width: 100%;
        }

        .col-container {
            height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            background-color: white;
        }

        .pdf-container {
            width: 100%;
        }
    }
</style>